<template>
    <div class="drawerContainer">
        <el-form :model="propJson" label-width="auto" style="width: 100%">
            <el-form-item label="播放器宽度">
                <el-input v-model="propJson.width" style="width: 100%" placeholder="播放器高度" />
            </el-form-item>

            <el-form-item label="播放器高度">
                <el-input v-model="propJson.height" style="width: 100%" placeholder="播放器宽度" />
            </el-form-item>

            <el-form-item label="是否循环播放">
                <el-radio-group v-model="propJson.loop">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="初始音量">
                <el-input v-model="propJson.volume" style="width: 100%" placeholder="初始音量 0 - 1" />
            </el-form-item>

            <el-divider>视频播放地址</el-divider>

            <CommonThirdServiceValue :actionInfo="propJson.videoSrcValueParam ? propJson.videoSrcValueParam : {}" :commonParam="commonParam" />

            <el-divider>视频封面地址</el-divider>

            <CommonThirdServiceValue :actionInfo="propJson.posterSrcValueParam ? propJson.posterSrcValueParam : {}" :commonParam="commonParam" />


        </el-form>
    </div>
</template>

<script setup name="VueVideoPlayDrawer" lang="ts">
import {computed, defineProps} from "vue";
import {useLowCodeStore} from "@/stores/lowcode/lowcode";
import CommonThirdServiceValue from "@/components/lowcode/service/CommonThirdServiceValue.vue";

let props = defineProps(['commonParam']);

let commonParam = computed(() => {return props['commonParam']})

let propJson = computed(() => {return useLowCodeStore().lowCodeDrawerJsonInfo});

</script>

<style scoped>

</style>